<template>
  <div class="lost-detail-page">
    <!-- 导航栏 -->
    <NavBar :title="post?.type === 'lost' ? '寻物启事' : '失物招领'" />
    
    <!-- 内容区域 -->
    <div class="page-content" v-if="post">
      <!-- 物品信息 -->
      <div class="lost-detail card">
        <!-- 类型标识 -->
        <div class="type-badge" :class="post.type">
          {{ post.type === 'lost' ? '寻物启事' : '失物招领' }}
        </div>
        
        <!-- 物品标题 -->
        <h1 class="item-title">{{ post.title }}</h1>
        
        <!-- 物品描述 -->
        <div class="item-description">
          <h3>物品描述</h3>
          <p>{{ post.content }}</p>
        </div>
        
        <!-- 详细信息 -->
        <div class="item-info">
          <div class="info-item">
            <van-icon name="location-o" size="16" />
            <span class="label">相关地点:</span>
            <span class="value">{{ post.location }}</span>
          </div>
          <div class="info-item">
            <van-icon name="phone-o" size="16" />
            <span class="label">联系方式:</span>
            <span class="value contact">{{ post.contactWay }}</span>
          </div>
        </div>
        
        <!-- 物品图片 -->
        <div class="item-images" v-if="post.images && post.images.length">
          <h3>物品图片</h3>
          <div class="images-grid">
            <img 
              v-for="(img, index) in post.images" 
              :key="index"
              :src="img" 
              alt="物品图片"
              class="item-image"
              @click="previewImage(post.images, index)"
            />
          </div>
        </div>
        
        <!-- 发布者信息 -->
        <div class="publisher-info">
          <div class="publisher-header">
            <img :src="post.userAvatar || '/images/default-avatar.png'" alt="头像" class="avatar" />
            <div class="publisher-details">
              <div class="nickname">{{ post.userNickname }}</div>
              <div class="publish-time">{{ formatTime(post.createTime) }}</div>
            </div>
          </div>
        </div>
        
        <!-- 底部统计 -->
        <div class="item-stats">
          <span class="stat-item">
            <van-icon name="eye-o" size="16" />
            浏览 {{ post.viewCount }}
          </span>
          <span class="stat-item">
            <van-icon name="chat-o" size="16" />
            评论 {{ post.commentCount }}
          </span>
        </div>
      </div>
      
      <!-- 联系按钮 -->
      <div class="contact-section">
        <van-button 
          type="primary" 
          size="large" 
          round 
          block
          @click="handleContact"
        >
          联系{{ post.type === 'lost' ? '失主' : '拾到者' }}
        </van-button>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <van-loading v-else class="loading-center" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { showImagePreview, showToast } from 'vant'
import NavBar from '@/components/Common/NavBar.vue'
import { lostApi } from '@/api'
import type { LostPost } from '@/types'
import { formatTime } from '@/utils/time'

const route = useRoute()
const postId = route.params.id as string

// 响应式数据
const post = ref<LostPost | null>(null)

// 加载物品详情
const loadPost = async () => {
  try {
    const response = await lostApi.getDetail(postId)
    post.value = response.data
  } catch (error) {
    showToast('加载失败')
    console.error('加载物品详情失败:', error)
  }
}

// 联系发布者
const handleContact = () => {
  if (post.value?.contactWay) {
    showToast('请通过以下方式联系：' + post.value.contactWay)
  }
}

// 预览图片
const previewImage = (images: string[], startPosition: number) => {
  showImagePreview({
    images,
    startPosition,
    closeable: true
  })
}

// 页面加载时获取数据
onMounted(() => {
  loadPost()
})
</script>

<style scoped>
.lost-detail-page {
  min-height: 100vh;
  background-color: #f1f1f1;
}

.page-content {
  padding: 16px;
  padding-bottom: 80px;
}

.lost-detail {
  margin-bottom: 16px;
}

.type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 16px;
}

.type-badge.lost {
  background-color: #fff3cd;
  color: #856404;
}

.type-badge.found {
  background-color: #d1ecf1;
  color: #0c5460;
}

.item-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.item-description {
  margin-bottom: 24px;
}

.item-description h3,
.item-images h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.item-description p {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.item-info {
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  color: #666;
  width: 80px;
}

.value {
  color: #333;
  flex: 1;
}

.contact {
  color: #636DEA;
  font-weight: 500;
}

.item-images {
  margin-bottom: 24px;
}

.images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.item-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
}

.publisher-info {
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.publisher-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.publisher-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nickname {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.publish-time {
  font-size: 12px;
  color: #999;
}

.item-stats {
  display: flex;
  gap: 20px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
}

.contact-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: white;
  border-top: 1px solid #f0f0f0;
}

.loading-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>